<template>
    <div class="container col-10">
        <div class="row content p-4 justify-content-center">
            <div class="col exit">
                <el-button color="#623c79" @click="exitLogin">退出登录</el-button>
            </div>
            <div class="row">
                <input type="text" class="title" placeholder="新建注释" v-model.trim.lazy="title" @focus="oldTitle = title"
                    @blur="sendTitle" :disabled="title === ''">
                <textarea class="text" placeholder="请注意..." v-model.trim.lazy="content" @focus="oldContent = content"
                    @blur="sendContent" :disabled="title === ''"></textarea>

            </div>
        </div>
    </div>
</template>

<script>
// 导入兄弟传值的组件
import bus from '../EventBus.js'

export default {
    name: 'NoteContent',
    data() {
        return {
            // 旧值 从侧边栏获取来的数据
            oldTitle: '',
            oldContent: '',
            // 标题
            title: '',
            // 内容
            content: '',
            // 修改时间
            time: '',
        }
    },
    props: ['notesList'],
    methods: {
        // 退出登录
        exitLogin() {
            // 清空登录信息
            localStorage.removeItem('token')
            // 跳转至未登录界面
            this.$router.push('/login')
        },
        // 获取当前时间模块
        // 时间模块
        getDate_time() {
            // 生成时间戳
            var date = new Date();
            var year = date.getFullYear();// 获取年
            var month = date.getMonth() + 1;// 获取月
            month = month < 10 ? '0' + month : month;
            var dates = date.getDate();// 获取日
            dates = dates < 10 ? '0' + dates : dates;

            // 声明一个星期数组
            const arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            var day = date.getDay();// 获取星期索引
            var hour = date.getHours();// 获取小时
            hour = hour < 10 ? '0' + hour : hour;

            var minute = date.getMinutes();// 获取分钟
            minute = minute < 10 ? '0' + minute : minute;

            var second = date.getSeconds();// 获取s
            second = second < 10 ? '0' + second : second;
            //格式化输出
            return (year + '年' + month + '月' + dates + '日' + arr[day] + ' ' + hour + ':' + minute + ':' + second)
        },
        // 向侧边栏发送标题内容
        sendTitle() {
            if (!this.title) return alert('禁止为空')
            // 先判断是否修改
            if (this.oldTitle === this.title) return
            // 赋予data更改后的数据
            const data = { title: this.title, content: this.content, time: this.getDate_time() }
            // 修改发给侧边栏
            bus.emit('titleChange', data)
        },
        // 向侧边栏发送内容
        sendContent() {
            if (!this.title) return alert('禁止为空')
            // 先判断是否修改
            if (this.oldContent === this.content) return
            // 赋予data更改后的数据
            const data = { title: this.title, content: this.content, time: this.getDate_time() }
            // 修改发给侧边栏
            bus.emit('contentChange', data)
        }
    },
    // 在创建时获取数据
    created() {
        // 接受选中笔记发送过来的内容
        bus.on('content', (data) => {
            this.title = data.title
            this.content = data.content
        })


    },
    mounted() {
        // 默认的第一个笔记内容
        bus.on('default', (data) => {
            this.title = data.title
            this.content = data.content
        })
    },

}
</script>

<style lang="less" scoped>
@vw: 19.2vw;

.container {

    .content {
        .exit {
            margin-right: 1vw;
            text-align: right;
            color: #fff;
        }

        .title {
            width: 85%;
            border-radius: 0;
            margin-top: (50/@vw);
            height: (100/@vw);
            margin-bottom: (70/@vw);
            font-size: 2.5vw;
            border: (5/@vw) solid #331f49;
            background-color: #fef5ff;
            color: #797979;

        }


        .text {
            width: 85%;
            resize: none;
            border-radius: 0;
            height: 80vh;
            padding: (30/@vw);
            font-size: 1.8vw;
            border: (5/@vw) solid #331f49;

            background-color: #fef5ff;
            color: #797979;
        }
    }

}
</style>